<script setup lang='ts'>
  import { nextTick, reactive, ref } from 'vue';
  import { gamesApi } from '@/api/controller';
  import xmUpload from '@/components/Upload/xm-upload.vue';
  import { ToastSuccess, ToastWarning, Toastloading, allNumber } from '@/utils/public';
  const formLabelWidth = '120px'
  const dataForm = ref()
  const $emit = defineEmits(['updateList'])
  const action = reactive({
    dialogFormVisible:false,
    disabled:false,
    title:'',
    sendTypeArr:[] as Array<any>,
    stateList:[] as Array<any>
  })
  const dayLsit = [
    {type:1,text:'第一天'},
    {type:2,text:'第二天'},
    {type:3,text:'第三天'},
    {type:4,text:'第四天'},
    {type:5,text:'第五天'},
    {type:6,text:'第六天'},
    {type:7,text:'第七天'},
  ]
  interface formQuert {
    id:number
    sigin_type:number
    img_url:string
    send_type:number
    send_num:number
    send_id:number
    status:number
  }
  let form = reactive({} as formQuert)
  const formRules = {
    sigin_type: [{ required: true, trigger: 'blur', message: '请选择签到日期' }],
    send_id: [{ required: true, trigger: 'blur', message: '请输入奖励ID' }],
    send_type: [{ required: true, trigger: 'blur', message: '请选择奖励类型' }],
    status: [{ required: true, trigger: 'blur', message: '请选择展示状态' }],
    img_url: [{ required: true, trigger: 'blur', message: '请上传签到图片' }],
  }
  const msgType = [
    {key:0,label:'文字信息'},
    {key:1,label:'图文信息'},
  ]
  const handleSubmit = ()=>{
    dataForm.value.validate(async(valid:any)=>{
      if(!valid) return
      const loading = Toastloading()
      gamesApi.setdaysign(form).then(res=>{
        loading.close()
        ToastSuccess(form.id?'编辑成功':'新增成功')
        closeDialog()
        $emit('updateList')
      }).catch(()=>{
        loading.close()
      })
    })
  }
  const openDialog = (query:any = {})=> {
    const {
      id=0, sigin_type='', sigin_day='', pic:img_url='', status=2,
      stateList=[], sendTypeArr=[],
      send_type='', send_num='', send_id='',
    } = query
    if(!id) return ToastWarning('签到奖励配置id不存在')
    Object.assign(form,{
      id,sigin_type, send_id, status,
      send_num, send_type, img_url
    })
    action.title = `签到${sigin_day}配置`
    action.stateList = stateList
    action.sendTypeArr = sendTypeArr
    action.dialogFormVisible = true
  }
  const closeDialog = ()=>{
    form = reactive({} as formQuert)
    nextTick(() => {
      dataForm.value.clearValidate();
    });
    action.dialogFormVisible = false
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
    top="5vh"
    class="xm-dialog input-width"
    v-model="action.dialogFormVisible"
    :close-on-click-modal="action.disabled"
    :show-close="action.disabled"
    :close-on-press-escape="action.disabled"
    width="40%"
    :title="action.title">
      <el-form ref="dataForm" :model="form" :rules="formRules">
        <!-- <el-form-item :label-width="formLabelWidth" label="签到日期" prop="sigin_type">
          <el-radio-group v-model="form.sigin_type">
            <el-radio
              v-for="item in dayLsit"
              :label="item.type"
            >
              {{ item.text }}
            </el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item :label-width="formLabelWidth" label="签到图片" prop="img_url">
          <xmUpload v-model:file-url="form.img_url" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="奖励类型" prop="send_type">
          <el-select
          v-model="form.send_type"
          placeholder="请选择奖励类型">
            <el-option
              v-for="item in action.sendTypeArr"
              :label="item.text"
              :value="item.type"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="奖励ID" prop="send_id">
          <el-input
            v-model="form.send_id"
            @input="allNumber(form,'send_id')"
            placeholder="请输入奖励ID" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="奖励数量" prop="send_num">
          <el-input
            v-model="form.send_num"
            @input="allNumber(form,'send_num')"
            placeholder="请输入奖励数量" />
        </el-form-item>
        <!-- <el-form-item :label-width="formLabelWidth" label="展示状态" prop="status">
          <el-select
          v-model="form.status"
          placeholder="请选择展示状态">
            <el-option
              v-for="item in action.stateList"
              :label="item.text"
              :value="item.type"
            />
          </el-select>
        </el-form-item> -->
        
      </el-form>
      <template v-if="!action.disabled" #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="handleSubmit()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>